<template>
    <div class="HotContent">
      <div class="Hot-header">
        <p>特价旅游</p>
        <p>最近距您1.6km<mu-icon value="chevron_right" class="chevron-img"></mu-icon></p>
      </div>
      <div class="Hot-list">

       <div class="Hot-conter"  v-for="(Item,index) in scrolllist" :key="index">
        <div class="img-container">
          <img :src="Item.imgurl" alt=""><p><span>{{Item.methods}}</span><span>上海出发</span></p>
        </div>
        <p>{{Item.title}}</p>
        <p><span>$</span>{{Item.price}} <span class="spanColor">起</span></p>
      </div>
     </div>
    </div>

</template>

<script>
    export default {
        name: "Homehot",
        props: [],
        components: {},
        data() {
            return {

              scrolllist:[
                  {
                    id:1,
                    title:"三亚5日自由行(5钻)·【暖冬甄选 错峰惊喜价】4晚连住·热门度假型酒店合辑 | 覆盖春节/寒假/节后错峰·享酒店超优价 | 2019超人气明星款·领跑全球自由行产品销量榜！",
                    imgurl:"https://dimg03.c-ctrip.com/images/100r0m000000de18oA455_C_360_202.jpg",
                    price:2061,
                    methods:"自由行"
                  },
                  {
                    id:2,
                    title:" 云南丽江+大理+昆明+玉龙雪山+双廊镇洱海6日5晚跟团游·【金猪贺岁 春节热卖】0自费『5钻客栈+大理海景房+室外温泉泡池』洱海大游船+私人红酒派对+花海微电影+歌手伴唱 赠【丽江千古情+篝火狂欢+旅拍基地天空之境】",
                    imgurl:"https://dimg06.c-ctrip.com/images/100k0g0000007qkp5F0C3_C_360_202.jpg",
                    price:1000,
                    methods:"跟团游"
                  },
                  {
                    id:3,
                    title:"普吉岛3-14日自由行·【淡季促销·每晚立减50元】旺季出发每晚立减30元·2/15-3/30淡季出发 每晚立减50元·住的越多优惠越多！2晚起住 可选双酒店 ·无边泳池/私人海滩/品牌酒店/独栋别墅·多样酒店风格随心选！",
                    imgurl:"https://dimg04.c-ctrip.com/images/300c0a0000004qu4lEE2A_C_360_202.jpg",
                    price:888,
                    methods:"自由行"
                  },
                  {
                    id:4,
                    title:"日本北海道5日4晚跟团游(3钻)·【2019樱花烂漫北海道】札幌1天自由 升1晚温泉酒店 回程行李额升级27KG 小樽运河 Gurutto雕刻公园 白色恋人工厂 洞爷湖展望台 享洞爷湖足汤浴乐趣",
                    imgurl:"https://dimg04.c-ctrip.com/images/300v0q000000ggark13C4_C_360_202.jpg",
                    price:4536,
                    methods:"自由行"
                  },
                  {
                    id:5,
                    title:"泰国曼谷+芭堤雅6日5晚跟团游·限时免落地签证费~0自费 格兰岛出海+公主号+大皇宫+富贵黄金屋+泰式古法按摩+KINGPOWER自助餐+赠800元大礼包·亲子游√爸妈放心游√【B线升级为7天6晚】",
                    imgurl:"https://dimg03.c-ctrip.com/images/10070p000000fwd1k6EEE_C_360_202.jpg",
                    price:4536,
                    methods:"跟团游"
                  },
                  {
                    id:6,
                    title:"新加坡5日4晚自由行(4钻)·『避寒正当时·下单立减300元/人』种草狮城小众打卡点『新航直飞！去程升级A380客机』",
                    imgurl:"https://dimg04.c-ctrip.com/images/300f10000000ovkzqFFF5_C_360_202.jpg",
                    price:18000,
                    methods:"跟团游"
                  },
                  {
                    id:7,
                    title:"厦门4日自由行(5钻)·【春节强劲甩尾】连住3晚热门高星酒店 | 最高减800/单·提前2天预定赠专车接机&暖冬甄选 | 冲2万人出游【可选B线·1晚鼓浪屿+2晚市区】",
                    imgurl:"https://dimg08.c-ctrip.com/images/200f0v000000k0r3361EC_C_360_202.jpg",
                    price:590,
                    methods:"自由行"
                  },
                  {
                    id:8,
                    title:"香港4日自由行·惠选航班惠享价【万人出游，G签&L签均可预订】限量赠送价值400元/人的BigBus+天星小轮+太平山往返缆车&摩天台套票【另可加购优惠门票：海洋公园双人同行|买一送一】",
                    imgurl:"https://dimg04.c-ctrip.com/images/300n0a0000004nru81DBE_C_360_202.jpg",
                    price:5999,
                    methods:"自由行"
                  },
                ]
            }
        },
        methods: {},
        mounted: function () {
        },
        watch: {},
        computed: {},
        filters: {},
    }
</script>

<style  lang="less" scoped>
  @import "../../../assets/css/index.less";
  .HotContent{
    box-sizing: border-box;
    width: @width;
    background-color: @headerbackgroundColor;
    margin:0.26rem 0;
    font-size: @headerFontSize;
    padding:@headerpadding;

  }
  .Hot-header{
    width: @width;
    height: 1.253rem;
    display: flex;
    justify-content:space-between;
    align-items:center;
  }
  .Hot-header p:first-child{
      border-left:0.1rem solid red ;
      padding-left: 0.2rem;
      font-size: 0.45rem;
  }
  .Hot-header p:last-child{
     font-size: 0.3rem;
  }
  .Hot-header .chevron-img{
     vertical-align: middle;
  }

  .Hot-list{
    width: 100%;
    overflow-x:scroll;
    overflow-y:hidden;
    white-space: nowrap;

  }

  .Hot-conter {
     width: 4.32rem;
     display: inline-block;
     margin: 0 9px 0 0;

  }
  .Hot-conter .img-container{
     height: 2.773rem;
    position: relative;
  }
  .img-container img{
    width: 100%;
    height: 100%;
    border-radius: 0.1rem;
    position: absolute;
    left: 0;
    top: 0;
  }
  .img-container p{
     position: absolute;
     left: 0;
     top: 0;
   }
  .img-container p span{
    display: inline-block;
    padding: 0.1rem;
    background-color: red;
    color: @headerbackgroundColor;
  }
  .img-container p span:nth-of-type(2){
    background-color: black;

  }



  .Hot-conter p:nth-of-type(1){
    height: 1.1rem;

    white-space: normal;
    overflow:hidden;//将超出的部分隐藏
    text-overflow:ellipsis;//超出部分用省略号显示
    display:-webkit-box;//将对象作为弹性伸缩盒子模型显示
    -webkit-box-orient:vertical;//从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
    -webkit-line-clamp:2;//这个属性不是css的规范属性，需要组合上面的两个属性，表示显示的行数
    line-clamp:2;
  }
  .Hot-conter p:nth-of-type(2){
     margin-top: 0.15rem;
     font-size: 0.45rem;
     color: red;

  }
  .Hot-conter p:nth-of-type(2) span{
    font-size: 0.3rem;
  }
  .spanColor{
    color: #2c3e50;
  }

</style>
